<template>
  <div>
      <dl class="time-line" v-if="data.length > 0">
        <dt>
          <i class="iconfont icon-anonymous-iconfont t1"></i>
          <div class="main">
            【{{lastData.acceptAddress}}】 {{lastData.remark}} 
            <!-- <a href="tel://18888888888">1888888888</a> 正在为你派件 -->
          </div>
          <div class="time f12">
            {{lastData.acceptTime}}
          </div>
        </dt>
        <dd v-for="(v, i) in middleData" :key="i">
                <i class="iconfont icon-anonymous-iconfont"></i>
          <div class="main">
            【{{v.acceptAddress}}】 {{v.remark}}
          </div>
          <div class="time f12">
            {{v.acceptTime}}
          </div>
        </dd>
      </dl>
      <div class="not-found" v-else>
        <div>暂无快递信息</div>
      </div>
  </div>
  
</template>

<script>
export default {
  name: 'time-line',
  data () {
    return {
      lastData: {},
      middleData: []
    }
  },
  props: {
    data: Array
  },
  mounted () {
    // console.log(this.data)
    if (this.data.length > 0) {
      this.lastData = this.data[0]
      this.middleData = this.data.slice(1)
    }
  }
}
</script>

<style lang="less">
.time-line {
  border-left: dotted 2px #ccc;
  padding-left: 1.5em;
  margin: 1em;
  .icon-anonymous-iconfont {
    position: absolute;
    left: -2.1em;
    top: 0;
    font-size: 1em;

  }
  dt {
    margin-bottom: 1em;
    position: relative;
  }
  dd {
    color: #aaa;
    margin-bottom: 1em;
    margin-left: 0;
    position: relative;
  }
}
</style>
